<template>
  <div class="set-nav">
    <Row 
      type="flex" 
      :gutter="16"
      justify="space-around"
      align="middle"
      class="hr-gray nav-list">
      <Col span="2">
        项目ID
      </Col>
      <Col span="4">
        所属分类
      </Col>
      <Col span="4">
        分类名称
      </Col>
      <Col span="5">
        调用方法
      </Col>
      <Col span="2">
        排序
      </Col>
      <Col span="2">
        是否显示
      </Col>
      <Col span="4">
        <Button  icon="checkmark-round" type="primary" @click="isCollapse=!isCollapse"> 新增 </Button>
        <Button  icon="loop" type="primary" @click="getNavArr"> 刷新 </Button>
        <Button  icon="checkmark-round" type="primary" @click="getForm"> 新增 </Button>
      </Col>
    </Row>

    <Collapse v-model="collapse" accordion class='setnav-collapse'>
      <Panel name='chick' >
        <div slot="content">
          <Row 
            
            :gutter="16"
            
            class="nav-list"
            >
            <Col span="2">
              {{pidToTitle(newnav.pid)}}
            </Col>
            <Col span="4">
              <i-select v-model="newnav.pid" >
                <Option v-for="nav in navArr" :value="nav.id" :key="nav.id" >{{ nav.title }}</Option>
              </i-select>
            </Col>
            <Col span="4">
              <Input  type="text" v-model="newnav.title" >
              
              </Input>
            </Col>
            <Col span="5">
              <Input  type="text" v-model="newnav.type"  ></Input>
            </Col>
            <Col span="2">
              <Input  type="text" v-model="newnav.sort" ></Input>
            </Col>
            <Col span="2">
              <i-switch v-model="newnav.status" size="large" >
                <span slot="open">显示</span>
                <span slot="close">隐藏</span>
              </i-switch>
            </Col>
            <Col span="4">
              <Button  icon="checkmark-round" type="primary" @click="addNav"> 确定 </Button>
            </Col>
          </Row>
        </div>
      </Panel>
    </Collapse>
    <form action="" ref="navform" id="navform"  >
      
    
      <div ref="navlist" id="navlist" >
        <div v-for="(item,index) in navArr" :key='item.id' >
          <Row 
            type="flex" 
            :gutter="16"
            justify="space-around"
            align="middle"
            class="hr-gray nav-list"
            >
            <input type="hidden" name="title[]" v-model="item.title" >
            <Col span="2">{{item.id}}</Col>
            <Col span="4">
              <template v-if="item.pid ==0">顶级目录</template>
              <template v-else>
                <i-select v-model="item.pid" >
                  <Option v-for="nav in navArr" :value="nav.id" :key="nav.id">{{ nav.title }}</Option>
                </i-select>
              </template>
            </Col>
            <Col span="4">
              <Input  type="text" v-model="item.title" >
              
              </Input>
            </Col>
            <Col span="5">
              <Input  type="text" v-model="item.type" ></Input>
            </Col>
            <Col span="2">
              <Input  type="text" v-model="item.sort"  ></Input>
            </Col>
            <Col span="2">
              <i-switch v-model="item.status" size="large" @on-change="uploadNav(index)">
                <span slot="open">显示</span>
                <span slot="close">隐藏</span>
              </i-switch>
            </Col>
            <Col span="4">
              <Button  icon="checkmark-round" type="primary" @click="uploadNav(index)"> 修改 </Button>
            </Col>
          </Row>
          
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
export default {
  name: 'SetNav',
  data () {
    return {
      navArr:[],
      isCollapse:true,
      newnav:{
        pid:0,
        groups:'bottom',
        title:'',
        type:'',
        icon:'',
        sort:100,
        status:true
      }
    }
  },
  mounted () {
    this.getNavArr();
  },
  computed:{
    collapse:function(){
      return this.isCollapse?"ccc":"chick";
    }
  },
  methods:{
    getNavArr:function(){
      this.$http.get('/nav')
      .then((response)=>{
        this.navArr=response.data;
      });
    },
    pidToTitle:function(pid){
      if(pid == 0 ||pid==null){
        return "首页";
      }else{
        let index;
        index=this.navArr.findIndex((value)=>{
          return value.id == pid;
        });
        return this.navArr[index].title;
      }
    },
    uploadNav:function(index){
      this.$http({
        method: 'post',
        url:"/nav/setnav",
        data:this.navArr[index]
      })
      .then((response)=>{
        this.$Message.success({
          content:"修改成功",
          top: 50,
          duration: 3
        });
      });
    },
    deleteNav:function(index){
      this.$http.get('/nav/delete',{
        params: {
          id: this.navArr[index].id
        }
      })
      .then((response)=>{
        this.$Message.success({
          content:"删除成功",
          top: 50,
          duration: 3
        });
      });
    },
    addNav:function(){
      this.$http({
        method: 'post',
        url:"/nav/setnav",
        data:this.newnav
      })
      .then((response)=>{
        let message;
        if(response.data.id){
          message="修改成功"
          this.getNavArr();
          this.isCollapse=true,
          this.newnav={
            pid:0,
            groups:'bottom',
            title:'',
            type:'',
            icon:'',
            sort:100,
            status:true
          }
        }
        this.$Message.success({
          content:message,
          top: 50,
          duration: 3
        });
      });
    },
    getForm:function(){
      console.log(this.$refs.navform);
      let form = new FormData(this.$refs.navform);
      console.log(form);
      this.$http({
        method: 'post',
        url:"/nav/setnavtree",
        data:form
      })
      .then((response)=>{
        
      });
    }

  }
}  
</script>
<style>
  .nav-list{
    font-size: 1rem;
    padding-top:1rem;
    padding-bottom: 1rem;
    text-align: center; 
  }
  .setnav-collapse .ivu-collapse-header{
    display: none;
  }
  .setnav-collapse .ivu-collapse-content{
    background: #85cfc7;
  }
  .placeholder-style{
    background: #85cfc7;
  }
</style>
